<template>
  <div>
    <el-radio-group v-model="radioActive" style="margin-bottom: 30px">
      <el-radio-button label="水淹分析">
        <div
          style="display: flex; align-items: center; justify-content: center"
        >
          <img
            v-if="radioActive == '抽水分析'"
            src="@/assets/images/水淹.png"
            alt=""
          />
          <img v-else src="@/assets/images/水淹-active.png" alt="" />
          <span>水淹分析</span>
        </div>
      </el-radio-button>
      <el-radio-button label="抽水分析">
        <div
          style="display: flex; align-items: center; justify-content: center"
        >
          <img
            v-if="radioActive !== '抽水分析'"
            src="@/assets/images/抽水.png"
            alt=""
          />
          <img v-else src="@/assets/images/抽水-active.png" alt="" />
          <span>抽水分析</span>
        </div>
      </el-radio-button>
    </el-radio-group>
    <div v-if="radioActive == '水淹分析'" class="shuiyan">
      <div class="left-box">
        <el-form label-width="60px">
          <el-form-item label="出水量">
            <el-input v-model="outWater" placeholder="请输入出水量" clearable
              ><template slot="suffix">方/小时</template></el-input
            >
          </el-form-item>
          <el-form-item label="压缩比">
            <el-select
              v-model="compressRatio"
              placeholder="请选择压缩比"
              clearable
            >
              <el-option label="10%" value="10"></el-option>
              <el-option label="50%" value="50"></el-option>
              <el-option label="100%" value="100"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="位置">
            <el-input
              v-model="position"
              placeholder="请输入位置"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="right-box">
        <el-table  :data="tableData" :cell-style="selectedCellStyle" height="170px">
          <el-table-column prop="n1" label="被淹巷道"></el-table-column>
          <el-table-column prop="n2" label="被淹长度（米）"></el-table-column>
          <el-table-column prop="n3" label="水量（方）"></el-table-column>
        </el-table>
      </div>
    </div>
    <div v-else>
      <el-form label-width="80px">
          <el-form-item label="总出水量">
            <el-input v-model="totaloutWater" placeholder="请输入总出水量" clearable
              ><template slot="suffix">立方米</template></el-input
            >
          </el-form-item>
          <el-form-item label="抽水量">
           <el-input v-model="drawWater" placeholder="请输入抽水量" clearable>
            <template slot="suffix">方/小时</template>
           </el-input>
          </el-form-item>
          <el-form-item label="剩余水量">
           <el-input v-model="remainWater" placeholder="请输入剩余水量" clearable>
            <template slot="suffix">立方米</template>
           </el-input>
          </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShuiyanMoni",
  data() {
    return {
      radioActive: "水淹分析",
      outWater: "", //出水量
      compressRatio: "", //压缩比
      position: "", //位置
      totaloutWater:'',//总出水量
      drawWater:'',//抽水量
      remainWater:'',//剩余水量
      tableData:[
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
        {
          n1:'1',
          n2:'2',
          n3:'3'
        },
      ]
    };
  },
  methods: {
    selectedCellStyle({ column, columnIndex, row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#061F41",
        };
      } else {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#0B2C54",
        };
      }
    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-radio-button__inner {
  color: #6e819a;
  background-color: #0d2c55;
  border: none !important;
}
::v-deep .is-active {
  color: #409eff !important;
  background-color: #133961 !important;
  border-radius: 4px;
}
::v-deep .el-form-item__label {
  color: rgba(255, 255, 255, 0.5);
}
::v-deep .el-table__header-wrapper {
  tr th {
    background-color: #0b2c54 !important;
    .cell {
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
::v-deep .el-table__row > td {
  border: none;
}
::v-deep .el-table::before {
  height: 0px !important;
}
::v-deep .el-table__cell,
::v-deep .is-leaf {
  border: none !important;
}
::v-deep .el-table__empty-block {
  background-color: #061f41 !important;
}
::v-deep .el-table__empty-text {
  color: #dee1e6 !important;
}
.shuiyan {
  display: flex;
  .left-box {
    width: 30%;
    border-right: 1px solid #0c2d55;
    padding: 0 15px 0 0;
  }
  .right-box {
    width: 70%;
    padding: 0 0 0 15px;
  }
}
</style>